'use strict';

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { Button, Popover, Icon } from 'antd';
import { EllipsisOutlined } from '@ant-design/icons';

class ButtonGroup extends Component {
    constructor(props) {
        super(props);
        this.state = {

        };
    }

    content = () => {
        <Button></Button>
    }

    render_ = () => {
        const { children } = this.props
        return (
            <div style={{ cursor: 'pointer' }}>
                <Popover placement="bottomRight" content={children} arrowPointAtCenter>
                    <EllipsisOutlined style={{ fontSize: 20, fontWeight: 'bolder' }} />
                </Popover>
            </div >
        )
    }

    render() {
        const { children } = this.props
        if (children) {
            if (Array.isArray(children)) {
                if (children.some(c => c)) {
                    return this.render_()
                }
            } else {
                return this.render_()
            }
        }
        return ''
    }
}

function mapStateToProps(state) {
    return {
    }
}

export default connect(mapStateToProps)(ButtonGroup);